<template>
  <div class="">
    <div class="user-detail">
      <div class="user-name">{{ userInfo.username || '' }}</div>
      <!-- <div class="user-id">{{ userInfo.id || '001'}}</div> -->
    </div>
    <div class="user-head-container">
       <el-avatar > {{ userInfo.username || 'user' }} </el-avatar>
    </div>
  </div>
</template>

<script>
// import bus from '../../assets/common/js/bus'
import { mapState } from 'vuex'

export default {
  name: 'userInformation',
  data: function () {
    return {
      curUserData: {name: '', pass: '', id: ''}
    }
  },
  computed: {
    // state
    ...mapState({
      userInfo: (state) => state.user.userInfo
    })
  },
  props: {
    msg: String
  },
  methods: {
    errorHandler () {
      return true
    }
  },
  components: {},
  created () {
  },
  mounted () {
  },
  beforeDestory () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user-head-container{
  width: 40px;
  height: 100%;
  text-align: center;
  /*flex: 2;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.user-head{
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius:20px;
  background: #fff;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
.user-detail{
  width: 100%;
  height: calc(100% - 10px);
  padding: 5px 0;
  /*flex: 2;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name{
  padding: 3px 10px 3px 0px;
  text-align: right;
}
.user-id{
  padding: 3px 10px 3px 0px;
  text-align: right;
}
</style>
